<template>
    <div class="app-container home" v-loading="loading">
        <div class="top">
            <div class="left home-box box-shadow">
                <h2 class="title">实时数据
                    <time>北京时间：{{ new Date().toLocaleDateString() }}</time>
                </h2>
                <div class="box">
                    <div class="left">
                        <h3 class="title">今日任务数</h3>
                        <span class="count-1">{{ data.todayTaskNum || 0 }}</span>
                    </div>
                    <div class="icon"><i class="el-icon-date"/></div>
                </div>
            </div>
            <div class="right home-box box-shadow">
                <h2 class="title">进行中任务</h2>
                <div style="display: flex">
                    <router-link class="box" v-for="item in taskCard"
                                 :to="{path: '/produce/produce/task', query: {activeTab: item.value}}"
                                 v-show="item.value !== taskStepEnum.complete.value && item.value !== taskStepEnum.news.value">
                        <div class="left">
                            <h3 class="title">{{ item.label }}</h3>
                            <span class="count-1">{{ item.num || '0' }}</span>
                            <span class="count-2">{{ item.count ? item.count + '件' : '— —' }}</span>
                        </div>
                        <div class="right icon">
                            <i :class="item.icon"/>
                        </div>
                    </router-link>
                </div>
                <p></p>
                <h3 class="title">物料数据</h3>
                <div style="display: flex">
                    <router-link class="box" v-for="item in materialCard"
                                 :to="{path: '/material/material', query:{activeTab: item.taskType}}">
                        <div class="left">
                            <h3 class="title">{{ item.title }}</h3>
                            <span class="count-1" :style="{color: item.color}">{{ item.count || 0 }}</span>
                        </div>
                        <div class="right icon">
                            <i :class="item.icon"/>
                        </div>
                    </router-link>
                </div>
            </div>
        </div>
        <!--底部图表和公告-->
        <div class="bottom">
            <div class="left home-box box-shadow">
                <h2 class="title">本月生产任务完成情况</h2>
                <div class="charts" ref="charts"/>
            </div>
            <div class="right home-box box-shadow">
                <h2 class="title">公告<router-link class="more" to="/notice/list">更多>></router-link></h2>
                <ul class="infinite-list">
                    <li v-for="item in noticeList">
                        <span @click="onNoticeDetail(item)">{{ item.noticeTitle }}</span>
                        <time>{{ item.createTime }}</time>
                    </li>
                </ul>
            </div>
        </div>

        <!--公告详情-->
        <el-drawer title="公告详情" :visible.sync="showNoticeDetail" size="500px">
            <notice-detail v-if="showNoticeDetail" :notice-id="currentNotice.noticeId"/>
        </el-drawer>
    </div>
</template>

<script>
import {getIndexInfo, getNoticeList, noticeDetail} from "./api";
import {responseEnum, taskStepEnum} from "../../const/const";
import * as echarts from 'echarts';
import {Line} from "./charts-options";
import _ from "lodash";
import NoticeDetail from "./noticeDetail"

export default {
    name: "Index",
    components: {NoticeDetail},
    data() {
        return {
            loading: true,
            data: {
                todayTaskNum: 0
            },
            taskStepEnum,
            // 任务卡片
            taskCard: _.cloneDeep(taskStepEnum),
            // 物料卡片
            materialCard: [
                {
                    icon: 'el-icon-s-shop',
                    title: '商品总数',
                    count: 0,
                    color: '#1890ff',
                    materialType: 0
                },
                {
                    icon: 'el-icon-warning',
                    title: '预警物料数',
                    count: 0,
                    color: '#ff9292'
                }
            ],
            // 图表实例
            myChart: null,
            resizeTimeOut: null,

            // 通知公告列表
            noticeParams: {
                pageNum: 1,
                pageSize: 10,
            },
            noticeList: [],
            showNoticeDetail: false,
            currentNotice: '',
            noticeLoading: false,
        };
    },
    mounted() {

        this.getIndexInfo();
        this.initChart();
        // 监听窗口变化
        window.addEventListener("resize", this.resizeFunc)
        this.getNoticeList();
    },
    beforeDestroy() {
        window.removeEventListener("resize", this.resizeFunc)
    },

    methods: {

        /**
         * 查询任务完成信息
         */
        getIndexInfo() {
            getIndexInfo().then(res => {
                if (res.code === responseEnum.success) {
                    this.data = res.data;
                    this.taskCard.ball.num = res.data.taskNumCaqiu;
                    this.taskCard.plating.num = res.data.taskNumDiandu;
                    this.taskCard.painting.num = res.data.taskNumCaihui;
                    this.taskCard.packing.num = res.data.taskNumBaozhuang;
                    this.materialCard[0].count = res.data.productNum;
                    this.materialCard[1].count = res.data.productWarningNum;

                    const data = Line(res.data.finishResultList || []);
                    this.myChart.setOption(data)
                }
            }).finally(() => this.loading = false)
        },

        /**
         * 查询公告列表
         */
        getNoticeList() {
            getNoticeList(this.noticeParams).then(res => {
                if (res.code === responseEnum.success) {
                    this.noticeList.push(...res.rows);
                    this.noticeParams.pageNum++;
                }
            }).finally(() => {
            })
        },
        /**
         * 公告详情
         */
        onNoticeDetail(row) {
            this.currentNotice = row;
            this.showNoticeDetail = true;
        },

        /**
         * 初始化图表
         */
        initChart(data = []) {
            this.myChart = echarts.init(this.$refs.charts);
            this.myChart.setOption(Line(data));
            
        },
        /**
         * 防抖
         */
        resizeFunc() {
            clearTimeout(this.resizeTimeOut);
            this.resizeTimeOut = setTimeout(() => {
                this.myChart.resize();
                clearTimeout(this.resizeTimeOut);
                this.resizeTimeOut = null;
            }, 250);
        },
    },
};
</script>

<style scoped lang="scss">
.home {
    .box-shadow {
        box-shadow: 0 0 10px 0 #ddd;
    }

    .home-box {
        padding: 15px;
        border-radius: 4px;
        margin-bottom: 20px;

        h2.title {
            margin: 0 0 20px 0;
            font-size: 22px;
            font-weight: bold;
            display: flex;
            align-items: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            justify-content: space-between;
            time {
                color: #999;
                font-weight: normal;
                font-size: 14px;
                margin-left: 10px;
            }
            .more{
                color: #00afff;
                font-size: 14px;
                cursor: pointer;
                font-weight: normal;
            }
        }

        h3.title {
            font-size: 18px;
            font-weight: bold;
            margin: 0 0 20px 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f9f9f9;
            padding: 15px;

            .count-1, .count-2 {
                display: block;
                font-size: 16px;
                font-weight: bold;
                color: #444;
                height: 18px;
                margin-top: 10px;
                line-height: 1;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .count-1 {
                color: #00afff;
            }

            .icon i[class*="el-icon-"] {
                font-size: 56px;
                color: #ddd;
                width: 55px;
                height: 55px;
            }
        }
    }

    > .top {
        display: flex;

        // 头部左边
        > .left {
            width: 360px;
            margin-right: 20px;

            .box {
                display: block;

                h3.title {
                    font-size: 22px;
                }

                .count-1 {
                    height: unset;
                    font-size: 24px;
                }

                .icon {
                    border-top: 1px solid #ddd;
                    margin-top: 20px;
                    padding-top: 20px;

                    i[class*="el-icon-"] {
                        font-size: 124px;
                        width: unset;
                        height: unset;
                    }
                }
            }
        }

        // 头部右边列表
        > .right {
            flex: 1;

            .box {
                width: 200px;
                margin-right: 20px;
            }
        }
    }

    //底部图表和公告
    > .bottom {
        display: flex;

        .left {
            width: 60%;
            margin-right: 20px;
            overflow: hidden;

            .charts {
                width: 100%;
                height: 400px;
            }
        }

        .right {
            flex: 1;

            .infinite-list {
                height: 400px;
                margin: 0;
                overflow: auto;
                padding: 0px;
                li {
                    font-size: 14px;
                    display: flex;
                    justify-content: space-between;
                    color: #555;
                    line-height: 2;
                    padding: 0 20px;
                    white-space: nowrap;
                    time {
                        color: #aaa;
                        width: 130px;
                    }

                    span {
                        cursor: pointer;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        flex: 1;
                        max-width: 360px;
                        display: block;
                        &:hover {
                            text-decoration: underline;
                        }
                    }

                }
            }
        }
    }

}
</style>
